<template>
    <div>
        <!--照片区域-->
        <!-- <form :action="uploadUrl" method="post" id="uploadPicForm" name="uploadPicForm" enctype="multipart/form-data"> -->
        <form class="uploadPicForm clearfix" id="uploadPicForm" enctype="multipart/form-data">
            <div class="img1 clearfix" v-for="(urls, index) in imgs " :key="urls.value">
                <div :class="{deleteBtn:!isImg}" class="delete clearfix" v-on:click="deleteImg(index)"><i class="iconfont icon-shanchu"></i></div>
                <img class="img" :src="urls" />
            </div>
            <div class="addimg" v-on:click="imgClick()" v-if="this.files.length<3 && isImg">
                <i class="iconfont icon-jiahao"></i>
            </div>
            <input style="float: left;  display: none;" type="file" id='uploadFile' accept="image/*" v-on:change="readLocalFile($event)">
        </form>
        <button :class="{btnBg:!isImg}" ref="addSafeBtn" type="button" class="btn btn-block btn-primary">提交</button>

    </div>
</template>

<script>
import utils from '@/utils'
import {
    getUserInfo,
    setUserInfo,
    logout
} from '@/utils/auth'
export default {
    data() {
        return {
            imgs: [],
            files: [],
            fileList: [],
            isImg: true,
            form:{
                photopath:''
            }
        }
    },
    created() {
        setUserInfo(utils.getQueryString('token'))
    },
    watch: {
        fileList() {
            this.form.photopath = "";
            this.fileList.forEach(item => {
                this.form.photopath += (item + ',');
            });
            this.form.photopath = this.form.photopath.substr(
                0,
                this.form.photopath.length - 1
            );
        },
    },
    methods: {
        //删除图片
        deleteImg(index) {
            this.imgs.splice(index, 1);
            this.fileList.splice(index, 1);
        },
        //图片click
        imgClick() {
            document.getElementById("uploadFile").click();
        },
        //图片上传
        readLocalFile(e) {
            let localFile = document.getElementById("uploadFile").files[0];
            if (!localFile) {
                return
            }
            //开关控制
            this.isImg = false
            this.$refs.addSafeBtn.disabled = true
            // console.log(this.$refs.addSafeBtn.disabled)

            // console.log(document.getElementById("uploadFile").files)
            this.files.push(localFile)


            //获取图片base64代码
            var reader = new FileReader();
            var content;
            var current = this;
            content = reader.readAsDataURL(localFile, "UTF-8");

            reader.onload = function (event) {
                content = event.target.result;
                current.imgs.push(content);
            }
            reader.onerror = function (event) {
                alert('error')
            }



            //上传
            var formData = new FormData();
            formData.append('file', this.files[this.files.length - 1]);
            // console.log(formData.get("file"))
            this.$api.shuiyuanjiance.uploadUrl(formData).then(res => {
                if (res.success) {
                    this.$refs.addSafeBtn.disabled = false
                    this.$$tip({
                        content: '该图片上传成功！'
                    })
                    this.fileList.push(res.data)
                    this.isImg = true
                }
            }).catch(res => {
                console.log(res)
            });;
        },

    },
    components: {

    }
}
</script>

<style scoped>
</style>